<div class="listOptions">
  <span>Faction: 
    <select id="factionFilter">
    </select>
  </span>
</div>

<div>
  <div class="standingGroup">
    <div class="groupHead shadeDark borderDark textLight" data-toggle="standingsFaction">Factions</div>
    <div id="standingsFaction" style="display:none">
      {include file="standings_factions.html" standingGroup=$standings.factions min=0 max=100 title="Liked By"}
      {include file="standings_factions.html" standingGroup=$standings.factions min=-100 max=0 title="Disliked By"}
    </div>
  </div>

  <div class="standingGroup">
    <div class="groupHead shadeDark borderDark textLight" data-toggle="standingsCorp">Corporations</div>
    <div id="standingsCorp" style="display:none">
      {include file="standings_corps.html" standingGroup=$standings.npcCorps min=0 max=100 title="Liked By"}
      {include file="standings_corps.html" standingGroup=$standings.npcCorps min=-100 max=0 title="Disliked By"}
    </div>
  </div>

  <div class="standingGroup">
    <div class="groupHead shadeDark borderDark textLight" data-toggle="standingsAgents">Agents</div>
    <div id="standingsAgents" style="display:none">
      {include file="standings_agents.html" standingGroup=$standings.agents min=0 max=100 title="Liked By"}
      {include file="standings_agents.html" standingGroup=$standings.agents min=-100 max=0 title="Disliked By"}
    </div>
  </div>
</div>

<script>
  $(document).ready(function() {

    $('.groupHead').each(function() {
      $(this).click(function() {
        $('#' + $(this).data('toggle')).toggle('fast');
      });
    });

    $('#factionFilter').change(function() {
      filterFactions($(this).val());
    });

    buildFactionList();
    hideEmptyGroups();
  });

  function buildFactionList() {
    var factions = new Array();

    $('.sFaction').each(function() {
      if (jQuery.inArray($(this).text(), factions) < 0) {
        factions.push($(this).text());
      }
    });

    factions.sort();

    var factionOptions = new Array();
    factionOptions.push($('<option/>').val('').text('All'));

    for (var i = 0; i < factions.length; i++) {
      factionOptions.push($('<option/>').val(factions[i]).text(factions[i]));
    }

    $('#factionFilter').append(factionOptions);
  }

  function filterFactions(faction) {
    $('.sFaction').each(function() {
      if (faction == '' || $(this).text() == faction) {
        $(this).parents('tr').first().removeClass('hideStanding').show('fast');
      } else {
        $(this).parents('tr').first().addClass('hideStanding').hide('fast');
      }
    });

    hideEmptyGroups();
  }

  function hideEmptyGroups() {
    $('.standingGroup').each(function() {
      if ($(this).find('tbody tr:not(.hideStanding)').length === 0) {
        $(this).hide();
      } else {
        $(this).show();
      }
    });
  }
</script>